<template>
  <div class="detail">
    <!-- 详情 -->
    <el-descriptions title="询价信息" :labelStyle="{ width: '100px' }" :column="2" style="margin: 0 auto;">
      <el-descriptions-item label="型号">
        <DescriptionsTooltip :value="qutoData.product_partnumber">{{ qutoData.product_partnumber }}</DescriptionsTooltip>
      </el-descriptions-item>
      <el-descriptions-item label="品牌">
        <DescriptionsTooltip :value="qutoData.product_brand ">{{qutoData.product_brand  }}</DescriptionsTooltip>
      </el-descriptions-item>
      <el-descriptions-item label="数量">{{ qutoData.quantity }}</el-descriptions-item>
      <el-descriptions-item label="批次">{{ qutoData.product_dateCode }}</el-descriptions-item>
      <el-descriptions-item label="封装">
        <DescriptionsTooltip :value="qutoData.product_package">{{qutoData.product_package}}</DescriptionsTooltip>
      </el-descriptions-item>
      <el-descriptions-item label="接受价">
        <span style="color: #FF0000;">{{ Number.isInteger(qutoData.adoptPrice) ? qutoData.adoptPrice + '.00' :
          qutoData.adoptPrice }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="币种">{{ qutoData.currency == 'CNY' || qutoData.currency == '人民币' ? '人民币' :
        '美元' }}</el-descriptions-item>
      <el-descriptions-item label="交货日期">{{ qutoData.deliveryDate }}</el-descriptions-item>
      <el-descriptions-item label="交货地">{{ qutoData.deliveryPlace == "FArea01" ? "中国大陆" : "中国香港" }}</el-descriptions-item>
      <el-descriptions-item label="包装">
        <DescriptionsTooltip :value="qutoData.product_packing">{{qutoData.product_packing}}</DescriptionsTooltip>
      </el-descriptions-item>
      <el-descriptions-item label="发票类型">
        <DescriptionsTooltip :value="qutoData.invoiceType">{{qutoData.invoiceType}}</DescriptionsTooltip>
      </el-descriptions-item>
      <el-descriptions-item label="剩余报价时间">
          <span style="color:#E02020">已结束
          </span>
        </el-descriptions-item>

    </el-descriptions>

    <label class="suptitle">报价信息</label>
    <div>
      <el-table :data="tableData" size="mini" :loading='tableLoading' border :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="createDate" label='报价时间' width="90">
          <template v-slot="{ row }">
            {{ row.createDate }}
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label='报价' width="60">
          <template v-slot="{ row }">
            <span style="color:#00AB2B;">{{ Number.isInteger(row.unitPrice) ? row.unitPrice + '.00' :
              row.unitPrice }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="currency" label='币种' width="60">
          <template v-slot="{ row }">
            {{ row.currency }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label='数量' width="60"></el-table-column>
        <el-table-column prop="deliveryDate" label='交货日期' width="80">
          <template v-slot="{ row }">
            {{ row.deliveryDate }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="termDate"
                           label='报价有效期'
                           width="100">
            <template v-slot="{row}">
              {{row.termDate && row.termDate.split(' ')[0]}}
            </template>
          </el-table-column> -->
        <el-table-column prop="dateCode" label='批次' show-overflow-tooltip>
          <template v-slot="{ row }">
            {{ row.dateCode }}
          </template>
        </el-table-column>
        <el-table-column prop="deliveryPlace" label='交货地' width="70">
          <template v-slot="{ row }">
            {{ row.deliveryPlace == "FArea01" ? "中国大陆" : "中国香港" }}
          </template>

        </el-table-column>

      </el-table>
    </div>
    <div class='foot' v-loading="btnLoading">
      <el-button class="resletBtn" size="small" @click="$emit('close')">取消</el-button>
    </div>

  </div>
</template>
  
<script>
import DescriptionsTooltip from "@/components/DescriptionsTooltip/index.vue";
export default {
  name: 'newDetail',
  components: {
    DescriptionsTooltip
  },
  props: {
    isActurl: {
      default: true,
      type: Boolean,
    },
    qutoData: {
      default: () => {
        return {};
      },
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      btnLoading: false,
    };
  },
  created() {
    this.tableData = this.qutoData.quotes;
  },
  mounted() {
    console.log('tag', this.qutoData)
  },
  methods: {
    // 无法报价
  },
  filters: {
    manageTime(v) {
      if (!v) {
        return v;
      } else {
        let hour = parseInt(v / 3600);
        let min = parseInt((v - hour * 60 * 60) / 60);
        let sec = parseInt((v % 3600) - min * 60);
        return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
      }
    },
  },
  directives: {
    inpNum: {
      inserted: function (el, binding) {
        el.oninput = function (v) {
          setTimeout(() => {
            let value = v.target.value;
            if (binding.modifiers.noquto) {
              value = value.replace(/[^\d]+/g, '');
            } else {
              value = value.replace(/[^\d^\.]+/g, '');
            }
            v.target.value = value;
          });
        };
      },
    },
    remainedTime: {
      inserted: function (el, binding) {
        let interval = null;
        let html = el.innerHTML;
        function timex() {
          html = el.innerHTML;
          if (!html.includes('已结束')) {
            let v = html.split(':')[0] * 3600 + html.split(':')[1] * 60 + html.split(':')[2] * 1;
            v = v - 1;
            if (v <= 0) {
              el.innerHTML = '已结束';
              binding.value.quoteRemainMin = 0;
              interval || clearInterval(interval);
            } else {
              binding.value.quoteRemainMin = v;
              let hour = parseInt(v / 3600);
              let min = parseInt((v - hour * 60 * 60) / 60);
              let sec = parseInt((v % 3600) - min * 60);
              el.innerHTML = `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec
                }`;
            }
          }
        }
        if (!html.includes('已结束')) {
          timex();
          interval = setInterval(() => {
            timex();
          }, 1000);
          if (interval) {
            el.setAttribute('data', interval);
          }
        }
      },
      unbind: function (el) {
        let data = el.getAttribute('data');
        if (data) {
          clearInterval(data);
        }
      },
    },
  },
};
</script>
<style scoped lang="scss" src="@/assets/styles/public.scss"></style>
<style scoped lang="scss">
.detail {
  // position: relative;
}

::v-deep .el-drawer {
  background: red !important;

  ::v-deep .el-drawer__title .el-drawer__header {
    margin-bottom: 10px !important;
  }
}

::v-deep .el-descriptions__header {
  // color: #008fff;
  // margin: 0 20px 20px 20px;
  color: #1A2035;
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 15px;

  .el-descriptions__title {
    font-size: 14px;
  }
}

::v-deep .el-descriptions__body {
  // margin: 0 20px;
  border: 1px solid #ccc;
  padding: 12px 20px;
  border-radius: 4px;

  .el-descriptions-item__container {
    justify-content: space-between !important;

    .el-descriptions-item__content {
      margin-right: 40px;
    }
  }

  .el-descriptions-item__label {
    color: #999;
    font-size: 12px;
  }

  .el-descriptions-item__content {
    color: #1A2035;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

.suptitle {
  color: #1A2035;
  display: block;
  font-weight: 600;
  font-size: 12px;
  padding: 15px 0;
}

.el-table {
  border-radius: 4px;
}

.el-form {
  // margin: 0 20px;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 4px;

  ::v-deep .el-input,
  .el-select {
    width: 250px;
  }

  ::v-deep .el-form-item__error {
    top: 10px;
    left: 255px;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep .el-input__inner {
    text-align: left;
  }
}

.foot {
  //   margin: 10px 20px;
  //   display: flex;
  //   justify-content: space-around;
  //   padding: 10px 140px;
  text-align: center;
  position: absolute;
  left: 45%;
  bottom: 1%;
}
</style >
   